<template>
    <div class="page-main">
        <Page show-sizer :total="total" :page-size="pageSize" :current="pageNum" @on-change="onChange" @on-page-size-change="onSizeChange" show-elevator show-total class="page-main-con"/>
    </div>
</template>

<script>
export default {
  name: 'page',
  props: {
    pageNum: Number,
    total: Number,
    pageSize: Number
  },
  data () {
    return {

    }
  },
  methods: {
    onChange (pageNum) {
      this.$emit('page-on-change', pageNum)
    },
    onSizeChange (pageSize) {
      this.$emit('page-on-size', pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.page-main{
    width: 100%;
    position: relative;
    height: 80px;
    &-con{
        position:absolute;
        left: 50%;
        top:50%;
        transform:translate(-50%,-50%)
    }
}
</style>
